<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillStyle = 'black';

        const O = { x: 300, y: 250 };

        // Define plate corners based on visual approximation
        const corner_tl_bearing = { x: 165, y: 250 };
        const corner_br_bearing = { x: 435, y: 250 };
        const corner_tr = { x: 400, y: 185 };
        const corner_bl = { x: 200, y: 315 };

        // Draw the rectangular plate
        ctx.beginPath();
        ctx.moveTo(corner_tl_bearing.x, corner_tl_bearing.y);
        ctx.lineTo(corner_tr.x, corner_tr.y);
        ctx.lineTo(corner_br_bearing.x, corner_br_bearing.y);
        ctx.lineTo(corner_bl.x, corner_bl.y);
        ctx.closePath();
        ctx.stroke();

        // --- Draw Axes ---
        // z' axis (axle)
        drawArrow(ctx, O.x - 250, O.y, O.x + 220, O.y);
        ctx.fillText("z'", O.x + 225, O.y + 8);
        
        // z axis (along long side)
        const angle_z = Math.atan2(corner_tr.y - corner_tl_bearing.y, corner_tr.x - corner_tl_bearing.x);
        const z_end_x = O.x + 180 * Math.cos(angle_z);
        const z_end_y = O.y + 180 * Math.sin(angle_z);
        drawArrow(ctx, O.x, O.y, z_end_x, z_end_y);
        ctx.fillText("z", z_end_x + 10, z_end_y + 10);

        // y, y' axis (along short side)
        const angle_y = Math.atan2(corner_bl.y - corner_tl_bearing.y, corner_bl.x - corner_tl_bearing.x);
        const y_end_x = O.x + 90 * Math.cos(angle_y);
        const y_end_y = O.y + 90 * Math.sin(angle_y);
        drawArrow(ctx, O.x, O.y, y_end_x, y_end_y);
        ctx.fillText("y, y'", y_end_x - 45, y_end_y);

        // x' axis
        drawArrow(ctx, O.x, O.y, O.x, O.y - 150);
        ctx.fillText("x'", O.x - 20, O.y - 145);

        // x axis
        const angle_x = 60 * Math.PI / 180;
        const x_end_x = O.x + 100 * Math.cos(angle_x);
        const x_end_y = O.y - 100 * Math.sin(angle_x);
        drawArrow(ctx, O.x, O.y, x_end_x, x_end_y);
        ctx.fillText("x", x_end_x - 5, x_end_y - 10);

        // Origin O
        ctx.fillText("O", O.x - 20, O.y + 20);

        // --- Draw Bearings ---
        function drawBearing(x, y) {
            ctx.fillStyle = "#eee";
            ctx.fillRect(x - 10, y - 15, 20, 20);
            ctx.strokeRect(x - 10, y - 15, 20, 20);
            ctx.fillStyle = "black";
            // Hatching for ground connection
            for (let i = 0; i < 4; i++) {
                const y_line = y + 5 + i * 4;
                ctx.beginPath();
                ctx.moveTo(x - 10, y_line);
                ctx.lineTo(x + 10, y_line);
                ctx.stroke();
            }
            // Ground line
            ctx.beginPath();
            ctx.moveTo(x - 20, y + 21);
            ctx.lineTo(x + 20, y + 21);
            ctx.stroke();
        }
        
        // Bearing at B (right)
        drawBearing(corner_br_bearing.x, corner_br_bearing.y);
        ctx.fillText("B", corner_br_bearing.x, corner_br_bearing.y - 20);

        // Bearing at left
        drawBearing(corner_tl_bearing.x, corner_tl_bearing.y);

        // --- Draw Annotations ---
        // Angle alpha
        ctx.beginPath();
        ctx.arc(O.x, O.y, 60, angle_z, 0);
        ctx.stroke();
        const alpha_label_angle = angle_z / 2;
        ctx.fillText("α", O.x + 75 * Math.cos(alpha_label_angle), O.y + 75 * Math.sin(alpha_label_angle));

        // Angular velocity omega
        ctx.beginPath();
        ctx.arc(O.x + 140, O.y, 15, Math.PI / 2, -Math.PI / 2, true);
        ctx.stroke();
        const omega_arrow_angle = -Math.PI / 2 + 0.1;
        ctx.moveTo(O.x + 140 + 15 * Math.cos(omega_arrow_angle), O.y + 15 * Math.sin(omega_arrow_angle));
        ctx.lineTo(O.x + 140 + 15 * Math.cos(omega_arrow_angle) - 8, O.y + 15 * Math.sin(omega_arrow_angle) - 5);
        ctx.moveTo(O.x + 140 + 15 * Math.cos(omega_arrow_angle), O.y + 15 * Math.sin(omega_arrow_angle));
        ctx.lineTo(O.x + 140 + 15 * Math.cos(omega_arrow_angle) + 5, O.y + 15 * Math.sin(omega_arrow_angle) - 8);
        ctx.stroke();
        ctx.fillText("ω", O.x + 140, O.y + 40);

        // Dimension 'a'
        const dim_a_start = { x: corner_tl_bearing.x - 20, y: corner_tl_bearing.y + 20 };
        const dim_a_end = { x: corner_tr.x - 20, y: corner_tr.y + 20 };
        ctx.beginPath();
        ctx.moveTo(dim_a_start.x, dim_a_start.y);
        ctx.lineTo(dim_a_end.x, dim_a_end.y);
        ctx.moveTo(dim_a_start.x - 5, dim_a_start.y - 5);
        ctx.lineTo(dim_a_start.x + 5, dim_a_start.y + 5);
        ctx.moveTo(dim_a_end.x - 5, dim_a_end.y - 5);
        ctx.lineTo(dim_a_end.x + 5, dim_a_end.y + 5);
        ctx.stroke();
        ctx.fillText("a", (dim_a_start.x + dim_a_end.x) / 2 - 20, (dim_a_start.y + dim_a_end.y) / 2 + 5);

        // Dimension '2a'
        const dim_2a_start = { x: corner_tl_bearing.x + 25, y: corner_tl_bearing.y + 25 };
        const dim_2a_end = { x: corner_bl.x + 25, y: corner_bl.y + 25 };
        ctx.beginPath();
        ctx.moveTo(dim_2a_start.x, dim_2a_start.y);
        ctx.lineTo(dim_2a_end.x, dim_2a_end.y);
        ctx.moveTo(dim_2a_start.x - 5, dim_2a_start.y + 5);
        ctx.lineTo(dim_2a_start.x + 5, dim_2a_start.y - 5);
        ctx.moveTo(dim_2a_end.x - 5, dim_2a_end.y + 5);
        ctx.lineTo(dim_2a_end.x + 5, dim_2a_end.y - 5);
        ctx.stroke();
        ctx.fillText("2a", (dim_2a_start.x + dim_2a_end.x) / 2, (dim_2a_start.y + dim_2a_end.y) / 2 + 25);
        
        // Figure caption
        ctx.font = 'bold 20px Times New Roman';
        ctx.fillText("Fig. 1.138.", 250, 450);

    </script>
</body>
</html>